<template>
	<!-- ysh -->
	<view>
		<view class="v_header">
			<u-search :showAction="true" animation placeholder="搜索订单(订单编号)" height="68" searchIconSize="56"  placeholder-class="placeholder-style" v-model="value"></u-search>
			<!-- <view class="v_searchs">
				<u-icon name="search" size="56" color="#909399"></u-icon><input type="search" class="v_inp_search"
					placeholder="搜索订单(订单编号)" v-model="orderLists.orderNumber" @click="fnSearch">
			</view> -->
			<u-tabs :list="list1" :scrollable="false" lineWidth="84" lineHeight="6" lineColor="#1BA784"
				itemStyle="height:108px; padding-left: 15px; padding-right: 15px;"
				:inactiveStyle="{color: '#606266',fontSize:'3.73vw', transform: 'scale(1)'}"
				:activeStyle="{color: '#303133',fontSize:'3.73vw', transform: 'scale(1.05)'}" @change="valChange">
			</u-tabs>
		</view>
		<!-- 全部 -->
		<view class="v_card" v-if="card==0 || card==2">
			<view class="u-page">
				<u-list>
					<!-- 商品卡片 -->
					<u-list-item class="list_card" v-for="item in orderLists" :key="item.id">
						<view @click="gotoOds(item.id)">
							<view class="list_head">
								<u-row justify="space-between" gutter="10">
									<u-col span="8">
										<view class="str">
											订单编号：{{item.orderNumber}}
										</view>
									</u-col>
									<u-col span="2">
										<view class="forsale">
											{{item.statusStr}}
										</view>
									</u-col>
								</u-row>
								<!-- 分割线 -->
								<u-divider text=""></u-divider>
								<u-row justify="space-between" gutter="10" align="top">
									<u-col span="2.5">
										<view class="demo-layout bg-purple-light">
											<u--image :showLoading="true" :src="item.goods[0].pic" width="144px"
												height="144px" @click="click"></u--image>
										</view>
									</u-col>
									<u-col span="6">
										<view class="demo-layout bg-purple">
											<view class="good_card_title" style="font-size: 3.2vw;">
												{{item.goods[0].goodsName}}
											</view>
											<view class="good_card_prop"
												style="color: #969799;font-size: 3.2vw;margin-top: 16px;">
												{{item.goods[0].property}}
											</view>
										</view>
									</u-col>
									<u-col span="1.5">
										<view class="demo-layout bg-purple-dark">
											<view class="good_price" style="font-size: 3.73vw;">
												￥{{item.goods[0].amount}}
											</view>
											<view class="good_num"
												style="color: #969799;font-size: 3.2vw;text-align: right;margin-top: 16px;">
												x{{item.goods[0].number}}
											</view>
										</view>
									</u-col>
								</u-row>
								<!-- 分割线 -->
								<u-divider text=""></u-divider>
								<u-row justify="flex-end" gutter="10" align="baseline">
									<u-col span="3.2">
										<view class="demo-layout bg-purple-light"></view>
									</u-col>
									<u-col span="2.5">
										<view class="demo-layout bg-purple">
											<view class="price_tag" style="font-size: 3.2vw;">
												共 {{item.goodsNumber}} 件商品
											</view>
										</view>
									</u-col>
									<u-col span="4.3">
										<view class="demo-layout bg-purple-dark">
											<view class="good_pay_price">
												<span style="font-size: 3.2vw;">实付款：</span>
												<span style="font-size: 3.2vw;">￥</span>
												<span style="font-size: 4.24vw;">{{item.amount}}</span>
												<!-- <span style="font-size: 3.2vw;">.00</span> -->
											</view>
										</view>
									</u-col>
								</u-row>
								<!-- 分割线 -->
								<u-divider text=""></u-divider>
								<u-row justify="space-between" gutter="10">
									<u-col span="6.5">
										<view class="demo-layout bg-purple-light"></view>
									</u-col>
									<u-col span="3.5">
										<view class="demo-layout bg-purple-dark">
											<!-- <u-button icon="kefu-ermai" text="联系客服" shape="circle"
												style="width: 188px;height: 64px;" size="28"></u-button> -->
											<view class="v_kefu">
												<u-icon name="kefu-ermai" size="48" color="#909399"></u-icon>
												<view >
													联系客服
												</view>
											</view>
										</view>
									</u-col>
								</u-row>
							</view>
						</view>
					</u-list-item>
					<view class="none"
						style="text-align: center;font-size: 36px;line-height: 108px;height: 108px;color: #9697B2;">
						没有更多了
					</view>
				</u-list>
			</view>
		</view>

		<!-- 无订单 -->
		<view class="v_null" v-else>
			<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/car.png" width="360" textSize="48">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import {
		_order
	} from "../../api/order.js"
	export default {
		data() {
			return {
				list1: [{
					name: '全部'
				}, {
					name: '待付款',
				}, {
					name: '待发货',
				}, {
					name: '待收货'
				}, {
					name: '待评价'
				}],
				src: "https://cdn.it120.cc/apifactory/2019/06/20/b30cd900-8034-4a0d-88af-62f6cf042577.jpg",
				orderLists: [],
				card: 0,
				value:''

			}
		},

		methods: {
			rightClick() {
				console.log('rightClick');
			},
			leftClick() {
				console.log('leftClick');
			},
			getOrderList() {
				_order().then(res => {
					console.log(res)
					if (res.code === 0) {
						res.data.orderList.forEach(item => {
							item.goods = res.data.goodsMap[item.id] || {}
						})
						this.orderLists = res.data.orderList
						console.log(this.orderLists)
					}
				})
			},
			valChange(index) {
				this.card = index.index
			},
			gotoOds(id) {
				console.log(id)
				uni.navigateTo({
					url: "/pages/order-detail/order-detail?id=" + id
				})
			},
			custom(){
				
			}
		},
		onReady() {
			this.getOrderList()
		}
	}
</script>

<style lang="scss" scoped>
	.v_searchs {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		border-radius: 100px;
		overflow: hidden;
		background-color: #F2F2F2;
		padding-left: 2.24vw;

		.u-icon {
			flex: 1 1 10%;
		}

		.v_inp_search {
			flex: 1 1 90%;
			height: 68rpx;
			background-color: #F2F2F2;
			font-size: 3.73vw;
		}
	}

	.str {
		font-size: 3.73vw;
	}

	.forsale {
		font-size: 3.73vw;
		color: #1BA784;
	}

	.v_header {
		margin-top: 24rpx;
		padding: 0 24rpx;
	}

	.v_card {
		background-color: #F7F8FA;
		padding: 24rpx 24rpx 0;
	}

	.list_card {
		background-color: #fff;
		padding: 18rpx;
		margin-bottom: 12px;
	}

	.v_kefu {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		border-radius: 100px;
		overflow: hidden;
		border-radius: 100px;
		border: 1px solid #909399;
		padding: 0 0.64vw;
		height: 8.56vw;

		view {
			border: none;
			background-color: #fff;
			font-size: 3.73vw;
			color: #909399;
		}
	}
</style>
